<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>04_弹性布局入门</title>
  <style>
    .container {
      width: 500px;
      background-color: lightgreen;
      /* 弹性布局: 子元素会自动成为弹性项目 */
      display: flex;
      /*主轴*/
      flex-direction: row-reverse;/*行模式反转*/
      flex-direction: column;/*列模式*/
      flex-direction: column-reverse;/*列模式反转*/
      flex-direction: row;/*行模式*/
      /*设置换行*/
      /*默认：当父容器空间不足时，子元素会压缩自己不换行*/
      flex-wrap: nowrap;/*不换行*/
      flex-wrap: wrap;/*换行*/
    }
    .item {
      width: 100px;
      height: 100px;
      background-color: lightpink;
      border: 3px solid deeppink;
      font-size: 45px;
    }
  </style>
</head>
<body>
<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
  <div class="item">6</div>
  <div class="item">7</div>
</div>
</body>
</html>
